// mela onlie 购物车界面 订制
import { PureComponent } from "react";
import { Button, Modal } from "antd-mobile"
import { connect } from 'dva';
import { InputItem } from 'antd-mobile';
import { handleImg, isNull, backToPrevious } from "../../utils/helper";
import MToast from '../../components/Util/MToast';
import "./PlaceOrder.less"
@connect(() => {
  return ({

  })
})
export default class AddAddress extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      recivier: "",//(收货人)
      street: "",//(街道)
      city: "",//(城市)
      district: "",//(行政区)
      country: "",//(国家)
      post_code: "",//(邮编)
      concat: "",//(联系电话)
    }
  }
  componentWillMount() {
    let { dispatch, location } = this.props;
    dispatch({
      type: "global/setHeaderTitle",
      payload: {
        title: T("Shipping address"),
        path: location.pathname + location.search
      }
    });
    let old_cart_address = localStorage.getItem(MI_APP_CODE + "old_cart_address");
    if (!isNull(old_cart_address)) {
      localStorage.removeItem(MI_APP_CODE + "old_cart_address");
      old_cart_address = JSON.parse(old_cart_address);
      for (let i in old_cart_address) {
        this.setState({
          [i]: old_cart_address[i]
        })
      }
    }
  }

  componentDidMount() {

  }
  submitAddress = () => {
    let { recivier, street, city, district, country, post_code, concat } = this.state;
    if (isNull(recivier)) {
      MToast.fail(T("Please enter the name of the consignee"), 1.5, null, false);
      return;
    }
    if (isNull(street)) {
      MToast.fail(T("Enter your street"), 1.5, null, false);
      return;
    }
    if (isNull(city)) {
      MToast.fail(T("Enter your city"), 1.5, null, false);
      return;
    }
    if (isNull(district)) {
      MToast.fail(T("Enter your regione"), 1.5, null, false);
      return;
    }
    if (isNull(country)) {
      MToast.fail(T("Enter your country"), 1.5, null, false);
      return;
    }
    if (isNull(post_code)) {
      MToast.fail(T("Enter zip code"), 1.5, null, false);
      return;
    }
    if (isNull(concat)) {
      MToast.fail(T("Enter mobile number"), 1.5, null, false);
      return;
    }
    localStorage.setItem(MI_APP_CODE + "cart_address", JSON.stringify({
      recivier, street, city, district, country, post_code, concat
    }))
    backToPrevious();
  }
  render() {
    let { recivier, street, city, district, country, post_code, concat } = this.state;
    return (
      <div className="normal" style={{ background: "#fff", height: "100%" }}>
        <div style={{ borderBottom: "1px solid #ddd" }} >
          <InputItem
            clear
            value={recivier}
            onChange={(e) => {
              this.setState({
                recivier: e
              })
            }}
            className="required"
            placeholder={T("Please enter the name of the consignee")}
          >{T("Consignee")}:</InputItem>
        </div>

        <div style={{ borderBottom: "1px solid #ddd" }}>
          <InputItem
            clear
            value={street}
            onChange={(e) => {
              this.setState({
                street: e
              })
            }}
            className="required"
            placeholder={T("Enter your street")}
          >{T("Street")}:</InputItem>
        </div>

        <div style={{ borderBottom: "1px solid #ddd" }} >
          <InputItem
            clear
            value={city}
            onChange={(e) => {
              this.setState({
                city: e
              })
            }}
            className="required"
            placeholder={T("Enter your city")}
          >{T("City")}:</InputItem>
        </div>

        <div style={{ borderBottom: "1px solid #ddd" }}>
          <InputItem
            clear
            value={district}
            onChange={(e) => {
              this.setState({
                district: e
              })
            }}
            className="required"
            placeholder={T("Enter your regione")}
          >{T("Regione")}:</InputItem>
        </div>
        <div style={{ borderBottom: "1px solid #ddd" }} >
          <InputItem
            clear
            value={country}
            onChange={(e) => {
              this.setState({
                country: e
              })
            }}
            className="required"
            placeholder={T("Enter your country")}
          >{T("Country")}:</InputItem>
        </div>

        <div style={{ borderBottom: "1px solid #ddd" }}>
          <InputItem
            clear
            value={post_code}
            onChange={(e) => {
              this.setState({
                post_code: e
              })
            }}
            className="required"
            placeholder={T("Enter zip code")}
          >{T("Zip code")}:</InputItem>
        </div>
        <div style={{ borderBottom: "1px solid #ddd" }} >
          <InputItem
            clear
            value={concat}
            onChange={(e) => {
              this.setState({
                concat: e
              })
            }}
            className="required"
            placeholder={T("Enter mobile number")}
          >{T("Tel")}:</InputItem>
        </div>

        <div style={{ height: "50px", position: "fixed", bottom: 0, width: "100%", borderTop: "1px solid #ddd", background: "#fff", padding: "0 10px" }} data-flex="cross:center">
          <Button size="small" type="primary" style={{ width: "100%", height: "40px", lineHeight: "40px", fontSize: "18px" }}
            onClick={() => {
              this.submitAddress()
            }}
          >{T("Ok")}</Button>
        </div>
      </div >
    )
  }
}
